/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, Dimensions, Image, TouchableOpacity, TouchableHighlight,ListView} from 'react-native';

import Common from '../../component/common';

import MoreAnalysis from './moreAnalysis';

import AnalysisList from './analysisList';

import stylesm from '../../style/media';

const totalWidth = Dimensions.get('window').width;

export default class AnalysisNeg extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    var data = this.props.data;
    var sentimentAnalysisCount = data.posTotalReportCount/(data.posTotalReportCount + data.negTotalReportCount);
    if(data.posTotalReportCount || data.negTotalReportCount){
      return (
        <View>
          <View style={[styles.analysisProgress]}>
            <View style={{backgroundColor: '#569254',borderRadius: totalWidth*0.022,width: Math.round(totalWidth*0.9*(1-sentimentAnalysisCount))}}></View>
          </View>
          <View style={[styles.analysisTitle,{height:totalWidth*0.133}]}>
            <TouchableOpacity onPress={()=>Common.onForward(this,MoreAnalysis,'allNeg',data)} style={[stylesm.reportTitleW,{height:totalWidth*0.133}]}>
              <Text style={[stylesm.reportTitleN,stylesm.reportTitleNF,stylesm.reportColorNeg]}>{Common.toTransformation(data.negTotalReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.negTotalReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={stylesm.reportTitleText}>历史</Text>
                <Text style={stylesm.reportTitleText}>总吐槽量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>Common.onForward(this,MoreAnalysis,'hoursNeg',data)} style={[stylesm.reportTitleW,{height:totalWidth*0.133}]}>
              <Text style={[stylesm.reportTitleN,stylesm.reportColorNeg]}>{Common.toTransformation(data.negYesterdayReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.negYesterdayReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={stylesm.reportTitleText}>48小时</Text>
                <Text style={stylesm.reportTitleText}>负面报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>Common.onForward(this,MoreAnalysis,'weekNeg',data)} style={[stylesm.reportTitleW,{height:totalWidth*0.133}]}>
              <Text style={[stylesm.reportTitleN,stylesm.reportColorNeg]}>{Common.toTransformation(data.negOther1ReportCount).value}<Text style={stylesm.unitF}>{Common.toTransformation(data.negOther1ReportCount).unit}</Text></Text>
              <View style={stylesm.reportTitleL}>
                <Text style={stylesm.reportTitleText}>七日负面</Text>
                <Text style={stylesm.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
          </View>
          <AnalysisList posNegData={data.negNewsList || []} isPosNeg={false} {...this.props} />
        </View>
      );
    }else{
      return null;
    }
  }
}

const styles = StyleSheet.create({
  analysis: {
    backgroundColor: 'yellow',
    paddingBottom: 10,
    borderRadius: 20
  },
  analysisCount: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#fffdfe',
    paddingTop: totalWidth*0.032,
    paddingLeft: totalWidth*0.04,
    paddingRight: totalWidth*0.035,
  },
  analysisCountW: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  analysisCountL: {
    fontSize: 17,
  },
  analysisCountC: {
    fontSize: 38,
  },
  analysisCountPL: {
    color: '#ff5757',
  },
  analysisCountPC: {
    color: '#ff5757',
  },
  analysisCountNL: {
    color: '#569252',
    marginLeft: 3,
  },
  analysisCountNC: {
    color: '#569252'
  },
  analysisProgress: {
    height: totalWidth*0.043,
    borderRadius: totalWidth*0.022,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: totalWidth*0.04,
    marginLeft: totalWidth*0.04,
    marginRight: totalWidth*0.035,
    backgroundColor: '#e6e6e6',
    width: totalWidth*0.9,
  },
  analysisProgressP: {
    position: 'absolute',
    left: 0,
    height:totalWidth*0.043,
    backgroundColor: '#d5d5d5',
  },
  analysisProgressPS: {
    borderTopColor: '#d5d5d5',
    borderTopWidth: totalWidth*0.043,
    borderRightColor: 'transparent',
    borderRightWidth: totalWidth*0.043,
    backgroundColor: null,
  },
  analysisProgressN: {
    position: 'absolute',
    right: 0,
    height:totalWidth*0.043,
    backgroundColor: '#569254',
  },
  analysisProgressNS: {
    borderBottomColor: '#569254',
    borderBottomWidth: totalWidth*0.043,
    borderLeftColor: 'transparent',
    borderLeftWidth: totalWidth*0.043,
    backgroundColor: null,
  },
  analysisTitle: {
    backgroundColor: '#fffdfe',
    flexDirection: 'row',
    height: totalWidth*0.16,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: totalWidth*0.04,
  },
  reportTitleLC: {
    color: '#569252'
  },
  reportTitleText: {
    fontSize: 12
  },
});
